<template>
	<view>
		<view>
			<image style="height: 300rpx;width: 750rpx;" :src="get_img+'sys/image/top.png'"></image>
		</view>
		<view class="active">
			<u-tabs :list="tab" :scrollable='scrollable' @click="click" :activeStyle='activeStyle'
				:inactiveStyle='inactiveStyle'>
			</u-tabs>
		</view>

		<view class="u-page" v-if="state==0" v-for="(item,index) in list[0]" :key="index" @click="details(item)">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<u-col span="3">
							<view class="demo-layout bg-purple">
								<view class="span_two">
									<u--image :src="get_img+item.header" width="100rpx" height="100rpx" radius="50rpx">
									</u--image>
								</view>
							</view>
						</u-col>
						<u-col span="5">
							<view class="demo-layout bg-purple-light">
								<p style="font-size: 35rpx;font-weight: 700;">{{item.name}}</p>
								<p style="font-size: 26rpx;color: #787777;">浏览量 {{item.through}}</p>
								<p class="loupan">{{item.work}}</p>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple-dark">
								<view style="height: 170rpx;">
									<view class="icon_one" @click="talk(item.id)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="chat-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
									<view class="icon_two" @click="call(item)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="phone-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
								</view>

							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="u-demo-block">
				<view style="750rpx" class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<view style="width: 150rpx;margin-left: 100rpx;">
							<u-col span="3">
								<view class="demo-layout bg-purple">
									<view class="span_two" style="">
										<u--image :src="get_img+item.header" width="100rpx" height="100rpx"
											radius="50rpx">
										</u--image>
									</view>
								</view>
							</u-col>
						</view>
						<u-col span="5">
							<view style="width: 200rpx;margin-right: 100rpx;margin-top: -80rpx;">
								<p style="font-size: 35rpx;font-weight: 700;">{{item.name}}</p>
								<p style="font-size: 26rpx;color: #787777;">浏览量 {{item.through}}</p>
								<p class="loupan">{{item.work}}</p>
							</view>
						</u-col>
						<u-col span="4">
							<view style="width: 230rpx;" >
								<view style="height: 170rpx;">
									<view class="icon_one" @click="talk(item.id)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="chat-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
									<view class="icon_two" @click="call(item)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="phone-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
								</view>

							</view>
						</u-col>
					</u-row>
				</view>
			</view>

			<!-- #endif -->
		</view>
		
		<view class="u-page" v-if="state==1" v-for="(item,index) in list[1]" :key="index" @click="details(item)">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<u-col span="3">
							<view class="demo-layout bg-purple">
								<view class="span_two">
									<u--image :src="get_img+item.header" width="100rpx" height="100rpx" radius="50rpx">
									</u--image>
								</view>
							</view>
						</u-col>
						<u-col span="5">
							<view class="demo-layout bg-purple-light">
								<p style="font-size: 35rpx;font-weight: 700;">{{item.name}}</p>
								<p style="font-size: 26rpx;color: #787777;">浏览量 {{item.through}}</p>
								<p class="loupan">{{item.work}}</p>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple-dark">
								<view style="height: 170rpx;">
									<view class="icon_one" @click="talk(item.id)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="chat-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
									<view class="icon_two" @click="call(item)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="phone-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
								</view>
		
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="u-demo-block">
				<view style="750rpx" class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<view style="width: 150rpx;margin-left: 100rpx;">
							<u-col span="3">
								<view class="demo-layout bg-purple">
									<view class="span_two" style="">
										<u--image :src="get_img+item.header" width="100rpx" height="100rpx"
											radius="50rpx">
										</u--image>
									</view>
								</view>
							</u-col>
						</view>
						<u-col span="5">
							<view style="width: 200rpx;margin-right: 100rpx;margin-top: -80rpx;">
								<p style="font-size: 35rpx;font-weight: 700;">{{item.name}}</p>
								<p style="font-size: 26rpx;color: #787777;">浏览量 {{item.through}}</p>
								<p class="loupan">{{item.work}}</p>
							</view>
						</u-col>
						<u-col span="4">
							<view style="width: 230rpx;" >
								<view style="height: 170rpx;">
									<view class="icon_one" @click="talk(item.id)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="chat-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
									<view class="icon_two" @click="call(item)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="phone-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
								</view>		
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<!-- #endif -->
		</view>
		
		<view class="u-page" v-if="state==2" v-for="(item,index) in list[2]" :key="index" @click="details(item)">
			<!-- #ifdef MP-WEIXIN -->
			<view class="u-demo-block">
				<view class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<u-col span="3">
							<view class="demo-layout bg-purple">
								<view class="span_two">
									<u--image :src="get_img+item.header" width="100rpx" height="100rpx" radius="50rpx">
									</u--image>
								</view>
							</view>
						</u-col>
						<u-col span="5">
							<view class="demo-layout bg-purple-light">
								<p style="font-size: 35rpx;font-weight: 700;">{{item.name}}</p>
								<p style="font-size: 26rpx;color: #787777;">浏览量 {{item.through}}</p>
								<p class="loupan">{{item.work}}</p>
							</view>
						</u-col>
						<u-col span="4">
							<view class="demo-layout bg-purple-dark">
								<view style="height: 170rpx;">
									<view class="icon_one" @click="talk(item.id)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="chat-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
									<view class="icon_two" @click="call(item)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="phone-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
								</view>
		
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="u-demo-block">
				<view style="750rpx" class="u-demo-block__content">
					<u-row customStyle="margin-bottom: 10px;margin-top:50rpx">
						<view style="width: 150rpx;margin-left: 100rpx;">
							<u-col span="3">
								<view class="demo-layout bg-purple">
									<view class="span_two" style="">
										<u--image :src="get_img+item.header" width="100rpx" height="100rpx"
											radius="50rpx">
										</u--image>
									</view>
								</view>
							</u-col>
						</view>
						<u-col span="5">
							<view style="width: 200rpx;margin-right: 100rpx;margin-top: -80rpx;">
								<p style="font-size: 35rpx;font-weight: 700;">{{item.name}}</p>
								<p style="font-size: 26rpx;color: #787777;">浏览量 {{item.through}}</p>
								<p class="loupan">{{item.work}}</p>
							</view>
						</u-col>
						<u-col span="4">
							<view style="width: 230rpx;" >
								<view style="height: 170rpx;">
									<view class="icon_one" @click="talk(item.id)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="chat-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
									<view class="icon_two" @click="call(item)">
										<view style="margin: 0 auto; text-align:center">
											<u-icon name="phone-fill" color="#FA636F" size="27"></u-icon>
										</view>
									</view>
								</view>
		
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab: [{
					name: '优选',
				}, {
					name: '咨询榜',
				}, {
					name: '新人榜',
				}],
				list: [{}, {}, {}],
				get_img: this.$get_img,
				src: "https://cdn.uviewui.com/uview/album/1.jpg",
				state: 0
			}
		},
		onLoad() {
			this.get_data()
		},
		methods: {
			get_data() {
				let that = this
				this.$model.get("user/common/get_all_custom").then(res => {
					that.list = res.data
				})
			},
			talk(id) {
				uni.navigateTo({
					url: '/pages/chat/chat?id=' + id
				})
			},
			details(item) {
				uni.setStorageSync("hxxq_custom", item)
				uni.navigateTo({
					url: '/pages/adviser/adviser?id=' + item.uid
				})
			},
			click(item) {
				console.log('item', item);
				this.state = item.index
			},
			call(item) {
				uni.makePhoneCall({
					phoneNumber: item.phone
				})
			}
		}
	}
</script>

<style>
	.active {
		color: #CDCDCD;
		/* background-color: rgba(255, 255, 255, .5); */
		border-radius: 25rpx;
	}

	.convert {
		width: 100vw;
		height: 200rpx;
		color: #000;
		/* background-color: rgba(0, 0, 0, .5); */

	}

	.wrap {
		padding: 12px;
	}

	.span_one {
		float: left;
		margin: 20rpx 0 0 50rpx;
		font-weight: 900;
	}

	.span_two {
		float: right;
	}

	.icon_one {
		/* padding: 4% 5% 5% 4%; */
		float: left;
		border-radius: 35rpx;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFECEB;
	}

	.icon_two {
		margin: 0 40rpx 0 0;
		/* padding: 4% 4% 4% 4%; */
		float: right;
		border-radius: 35rpx;
		width: 70rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #FFECEB;
	}

	.icon_three {
		margin: -85rpx 0 0 140rpx;
		float: left;
		border-radius: 30rpx;
	}

	.wz {
		margin: -80rpx 40rpx 0 0;
		float: right;
		font-size: 28rpx;
		color: #787777;
	}

	.loupan {
		font-size: 27rpx;
		color: #787777;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.demo-layout {
		height: 200rpx;
		border-radius: 4px;
	}

	.bg-purple {
		/* background: #ffffff; */
	}

	.bg-purple-light {
		background: #ffffff;
		margin-left: 5rpx;
	}

	.bg-purple-dark {
		background: #ffffff;
	}
</style>
